<template>
  <div id="mechanism" v-loading='loading' element-loading-text="拼命加载中">
    <div class="autoLeft">
        <div>
            <at-tabs type="border-card" v-model="activeName" v-show="treeShow"  id="nodeTree">
              <at-tab-pane label="组织机构关系图" name="first">
                <at-tree :data="department" node-key="agency_id" :default-expanded-keys="departmentTreeKey" :props="defaultProps"
                  :highlight-current="true"></at-tree>
              </at-tab-pane>
              <at-tab-pane label="监管关系图" name="second">
                <at-tree :data="supervision" :props="defaultProps" :default-expanded-keys="supervisionTreeKey" node-key="agency_id"></at-tree>
              </at-tab-pane>
            </at-tabs>
          <mechanismDetaile v-if="mechanismDetalie" :nodeId="detailid"></mechanismDetaile>
        </div>
        <div>
          <span class="topTitle">机构信息列表</span>
          <div class="leftBox">
            <at-col>
              <at-button @click="changeSync" class='messageCount' type="primary"><i class="saas-icon-page-refresh" style="position:absolute;top:5px;left:3px;font-size:20px" ></i><span style="margin-right:-15px">查看同步信息</span></at-button>
              <span v-if="syncCount>0" :class="{'doubleNum':syncCount.toString().length === 2, 'singleNum': syncCount.toString().length === 1, 'more': syncCount>99, 'common': true}">
                <span class="infoCount" v-if="syncCount<=99"> {{syncCount}}</span>
                <span class="infoCount" v-else>99+</span>
              </span>
              <at-search class="searchFloat" v-model="input" placeholder="请输入机构名称" type="text" project='mh' @keyup.enter.native="search" icon="search" :on-icon-click="search"></at-search>
            </at-col>
            <at-table :data="tableData" style="width:100%"  @row-click="details"
              @filter-change="filterHandler" @sort-change="sortChange">
              <at-table-column prop="aagency_name" label="机构名称" width='200px'>
              </at-table-column>
              <at-table-column prop="type_name" label=" 类型" :filters="tradename" column-key="type_name" width='100px'>
              </at-table-column>
              <at-table-column prop="bagency_name" label="上级机构" :formatter="formatter" width='200px'>
              </at-table-column>
              <at-table-column prop="belong_area" label="所属区域" :filters="area" column-key="area_name" width='100px'>
              </at-table-column>
              <at-table-column prop="sup" label="监管机构" :formatter="formatters" width='200px'>
              </at-table-column>
              <at-table-column prop="ar_time" label="创建时间" sortable="custom" >
              </at-table-column>
            </at-table>
            <Pagination :currentPage="current" :total="total" :pageSizes="pageSizes" :pageSize="pagesize" layout='total, sizes, prev, pager, next, jumper'
              @current-change="handleCurrentChange" @size-change="handleSizeChange"></Pagination>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
  import mechanismDetaile from './newdetailed.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'mechanism',
    data () {
      return {
        ifStatus: false,
        row: {},
        suredeleteone: false,
        detailid: '',
        updateid: '',
        activeName: 'first',
        pageSizes: [20, 40, 80, 100],
        input: '',
        type: '',
        defaultProps: {
          children: 'children',
          label: 'value',
          agency_id: 'agency_id'
        }
      }
    },
    components: {
      mechanismDetaile
    },
    computed: {
      treeShow: {
        get () {
          return this.$store.state.mechanism.treeShow
        },
        set (row) {
          this.$store.state.mechanism.treeShow = row
        }
      },
      mechanismDetalie: {
        get () {
          return this.$store.state.mechanism.mechanismDetalie
        },
        set (row) {
          this.$store.state.mechanism.mechanismDetalie = row
        }
      },
      ...mapState({
        department: state => state.mechanism.departmentList, // 机构树信息
        supervision: state => state.mechanism.supervisionList, // 机构树信息
        tableData: state => state.mechanism.mechanismDate.table,
        current: state => state.mechanism.mechanismDate.pagination.current,
        pagesize: state => state.mechanism.mechanismDate.pagination.pageSize,
        total: state => state.mechanism.mechanismDate.total,
        loading: state => state.mechanism.loading,
        departmentTreeKey: state => state.mechanism.departmentTreeKey,
        supervisionTreeKey: state => state.mechanism.supervisionTreeKey,
        tradename: state => state.mechanism.options,
        area: state => state.mechanism.area,
        syncCount: state => state.mechanism.syncCount
      })
    },
    methods: {
      deletemsgone () {
        this.$store.dispatch('mechanism/delMechanism', { 'anode_id': this.row.aagency_id, 'node_name': this.row.aagency_name })
        this.$store.dispatch('system/auth') // 修改用户信息时重新存入session
        this.suredeleteone = false
      },
      cancel () {
        this.suredeleteone = false
      },
      changeSync () {
        this.$router.push('mechanism/syncmechanism')
      },
      formatters (row) {
        if (row.sup === null || row.sup === '默认节点') {
          return '无'
        } else {
          return row.sup
        }
      },
      formatter (row) {
        if (row.bagency_name === '默认节点') {
          return '无'
        } else {
          return row.bagency_name
        }
      },
      filterHandler (value) {
        console.log(value)
        console.log(Object.keys(value)[0])
        if (Object.keys(value)[0] === 'type_name') {
          this.$store.commit('mechanism/setFilters', { key: Object.keys(value)[0], value: value['type_name'] })
        } else {
          this.$store.commit('mechanism/setFilters', { key: Object.keys(value)[0], value: value['area_name'] })
        }
        this.$store.dispatch('mechanism/getMechanism') // 获取机构信息列表
      },
      sortChange ({ column, prop, order }) {
        if (prop) {
          var data = {
            'prop': prop,
            'order': order.substring(0, order.length - 3)
          }
          this.$store.commit('mechanism/setOrderby', data)
          this.$store.dispatch('mechanism/getMechanism')
        }
      },
      details (row) {
        this.detailid = row.aagency_id
        this.upmechanis = false
        this.addmechanis = false
        this.mechanismDetalie = true
        this.treeShow = false
      },
      // 显示条数
      handleSizeChange (el) {
        this.$store.commit('mechanism/getPageize', el)
        this.$store.dispatch('mechanism/getMechanism')
      },
      // 显示第几页
      handleCurrentChange (el) {
        this.$store.commit('mechanism/getCurrent', el)
        this.$store.dispatch('mechanism/getMechanism')
      },
      // 搜索
      search () {
        this.$store.commit('mechanism/getValues', this.input)
        this.$store.dispatch('mechanism/getMechanism')
      },
      // 禁用
      stop (row) {
        this.suredeleteone = true
        this.row = row
      }
    },
    mounted () {
      this.$store.dispatch('mechanism/getArea', 1) // 获取区域列表信息
      this.$store.dispatch('mechanism/getFdepartment') // 机构树数据
      this.$store.dispatch('mechanism/getSupervision') // 监管树数据
      this.$store.dispatch('mechanism/getNodetype', 1) // 获取机构类型列表
      this.$store.dispatch('mechanism/getMechanism') // 获取机构信息列表
      this.$store.dispatch('mechanism/getSyncCount') // 变更信息数量
    },
    watch: {
      $route (to, from) {
        if (to.name === '机构信息列表') {
          this.$store.dispatch('mechanism/getArea', 1) // 获取区域列表信息
          this.$store.dispatch('mechanism/getFdepartment') // 机构树数据
          this.$store.dispatch('mechanism/getSupervision') // 监管树数据
          this.$store.dispatch('mechanism/getNodetype', 1) // 获取机构类型列表
          this.$store.dispatch('mechanism/getMechanism') // 获取机构信息列表
        }
      }
    }
  }
</script>
<style scoped>

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
#nodeTree .at-tabs__content{
    height: 600px;
    overflow: auto;
}
#mechanism ::-webkit-scrollbar
{
  width: 8px;
  height: 16px;
  background-color: #F5F5F5;
}
 
/*定义滚动条轨道 内阴影+圆角*/
#mechanism ::-webkit-scrollbar-track
{
  border-radius: 10px;
  background-color: #F5F5F5;
}
 
/*定义滑块 内阴影+圆角*/
#mechanism ::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  background-color: #e5e5e5;
}
#mechanism .at-tabs__nav-scroll {
  padding-left: 20px;
  padding-top: 15px;
}
#mechanism .at-tabs--border-card>.at-tabs__header .at-tabs__item.is-active{
  color: #1f92ef;
  font-weight: 600;
}
#mechanism .at-tabs--border-card>.at-tabs__header .at-tabs__item{
  transition: none;
  height: 35px;
}
#mechanism .at-tabs__header{
  width: 100%
}
#mechanism .at-tabs__content{
  border-top: 1px solid #eee !important;
}
#nodeTree {
  padding: 3px 20px 20px 20px
}
 #mechanism .saas-icon-ten{
    font-size: 20px;
    vertical-align: -4px;
    margin-right: 5px
  }
  #mechanism .saas-icon-page-refresh{
    font-size: 20px;
    vertical-align: -4px;
    margin-right: 5px
  }
  #mechanism .doubleNum {
  width: 25px;
  margin-top: 4px;
  border-radius: 8.5px;
  }
  #mechanism .singleNum {
    width: 17px;
    border-radius: 50%;
    top: -15px;
    position: relative;
    left: -14px;
  }
  #mechanism .more {
    width: 32px;
    border-radius: 8.5px;
  }
  #mechanism .common {
    font-weight: bold;
    background: #1f92ef;
    display: inline-block;
    height: 17px;
    position: relative;
    left: -14px;
    top: -15px;
  }
  #mechanism .infoCount {
    display: block;
    color: #FFFFFF;
    height: 17px;
    line-height: 18px;
    text-align: center;
    font-size : 10px;
    -webkit-transform : scale(0.84,0.84) ;
    *font-size:10px;
  }
  #mechanism .searchFloat {
    float: right;
  }

  #mechanism .leftBox {
    padding: 10px 20px 20px 20px
  }

  #mechanism .topTitle {
    display: block;
    border-bottom: 1px solid #EEE;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    padding-left: 20px;
    color: #5c6781;
    font-weight: bold;
  }

  #mechanism .messageCount {
    position: relative;
    float:left; 
    /* margin-top:10px;
    margin-right:10px; */
    width:110px;
    height:30px;
    border-radius:1px;
     /* margin-left:20px; */
  }

  #mechanism .autoLeft {
    overflow: hidden;
    /*    min-height: 900px;*/
  }

  #mechanism .autoLeft>div:nth-child(1) {
    float: right;
    min-width: 478px;
    max-width: 478px;
    background-color: white;
  }

  #mechanism .autoLeft>div:nth-child(2) {
    margin-right: 498px;
    border-right: 1px solid #EEE;
    background-color: white;
    /*    margin-bottom: -900px;
    padding-bottom: 900px*/
  }

  #mechanism .msg {
    border-radius: 50%;
    background-color: #1f92ef;
    color: #fff;
    position: absolute;
    width: 17px;
    height: 17px;
    text-align: center;
    line-height: 17px;
    right: -8px;
    top: -8px;
    font-size: 10px;
  }

  #mechanism .maxMsg {
    width: 25px;
    height: 25px;
    line-height: 25px;
    top: -10px;
    right: -13px;
  }

  #mechanism>.at-col {
    background-color: white;
  }

  #mechanism>.at-col:nth-child(1) {
    float: none;
    padding: 10px 20px 9px 20px;
    border-bottom: 1px solid #EEE;
  }

  .tableBox {
    padding: 15px;
    border: 1px solid #EEE
  }

  #mechanism.top {
    overflow: hidden;
  }

  #mechanism .inputsize {
    float: right;
  }

  #mechanism .floatRight {
    float: right;
  }

 /* #mechanism .addleft .at-button {
    width: 120px;
    height: 32px;
    margin-left: 10px
  }*/

  #mechanism .at-pagination {
    margin-top: 10px;
    width: 40%;
    margin: 0px auto;
    height: 30px;
    margin-top: 20px
  }

  #mechanism {
    overflow: hidden;
    width: 100%;
    /*   background-color: white;*/
    min-height: 900px;
  }
  #mechanism .at-tree-node__content{
   height: 100%;
 }
 #mechanism .is-leaf+.at-tree-node__label{
   white-space: pre-wrap;
   word-wrap: break-word;
   width: 290px;
 }
 #mechanism .at-tree-node__label{
   white-space: pre-wrap;
   word-wrap: break-word;
   width: 306px;
 }

  #mechanism .at-button+.at-button {
    margin: 0;
    position: relative;
  }
</style>